<template>
    <div id="drivingcontent">
        <!-- 驾校名字 -->
        <div class="d-name">
            <h3>万骏驾校</h3>
        </div>
        <!-- 排名 -->
        <div class="d-pm">
            <span class="pmclass">暂无排名</span>
            <span class="tagclass">学员0</span>
            <span class="tagclass">评分3</span>
        </div>
        <!-- 列表区域 -->
        <div class="d-list">
            <ul>
                <li>
                    <div class="d-list-title">驾校地址：</div>
                    <div class="d-list-content">成都市高新区</div>
                </li>
                <li>
                    <div class="d-list-title">基础设施：</div>
                    <div class="d-list-content">
                        <ul class="baseIcon">
                            <li>
                                <img src="https://qiye.jiakaobaodian.com/static/img/k1.748e3a90.svg" alt="">
                                <span>免费WIFI</span>
                            </li>
                            <li>
                                <img src="https://qiye.jiakaobaodian.com/static/img/k1.748e3a90.svg" alt="">
                                <span>商店</span>
                            </li>
                            <li>
                                <img src="https://qiye.jiakaobaodian.com/static/img/k1.748e3a90.svg" alt="">
                                <span>餐厅</span>
                            </li>
                            <li>
                                <img src="https://qiye.jiakaobaodian.com/static/img/k1.748e3a90.svg" alt="">
                                <span>储物箱</span>
                            </li>
                            <li>
                                <img src="https://qiye.jiakaobaodian.com/static/img/k1.748e3a90.svg" alt="">
                                <span>网吧</span>
                            </li>
                            
                        </ul>
                    </div>
                </li>
                 <li v-if="false">
                    <div class="d-list-title">驾校标签：</div>
                    <div class="d-list-content">
                        <ul class="d-icon">
                            <li v-for="(item,index) in 7" :key='index' @click="cTag">
                               <span>大</span>
                               <span>规模大</span>
                            </li>
                        </ul>
                    </div>
                </li>

                 <li>
                    <div class="d-list-title">考试资质：</div>
                    <div class="d-list-content">-</div>
                </li>
                <li>
                    <div class="d-list-title">附加服务：</div>
                    <div class="d-list-content">-</div>
                </li>
                <li>
                    <div class="d-list-title">班型信息：</div>
                    <div class="d-list-content">已设置1个班型 <el-link type="primary" :underline='false' style="margin-left:5px;" @click="classtype">前往设置</el-link></div>
                </li>
                <li>
                    <div class="d-list-title">场地信息：</div>
                    <div class="d-list-content">已设置1个报名点、1个训练场、3个考场  <el-link type="primary" :underline='false' style="margin-left:5px;" @click="gokc">前往设置</el-link></div>
                </li>
            </ul>
        </div>
       
    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    methods:{
        //前往设置班型
        classtype(){
            this.$router.push({
                path:'/calsstype/classtype'
            })
        },
        //前往设置考场
        gokc(){
            this.$router.push({
                path:'/school-admin/kc'
            })
        },
        //点亮标签
        clickTag(){
            this.$message({
              message:'最多选择三个标签！',
              type:'success'
            });
        },
        cTag(){
			
        }
    },
    components:{
    }
}
</script>

<style scoped lang='scss'>
#drivingcontent{
    .d-name{
        h3{
            font-size: 26px;
            padding: 0;
            margin: 0;
        }
        margin-bottom: 15px;
    }
    .d-pm{
        span{
            margin-right: 5px;
        }
    }
    .pmclass{
        background: linear-gradient(90deg,#90b6ff,#5489ff 44%,#5288ff);
        color: #fff;
        padding: 3px 6px;
        border-radius: 3px;
    }
    .d-list{
        margin-top: 30px;
        ul{
            li{
                font-size: 14px;
                display: flex;
                margin: 20px 0;
                cursor: pointer;
                .d-list-content{
                    margin-left: 5px;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
        .baseIcon{
            display: flex;
            li{
                display: flex;
                flex-direction: column;
                margin: 0 !important;
                justify-content: center;
                align-items: center;
                margin-right:25px !important;
                img{
                    width: 25px;
                    opacity: .2;
                }
                span{
                    margin-top: 5px;
                    font-size: 12px;
                }
            }
        }
        .d-icon{
             display: flex;
             align-items: center;
            li{
                display: flex;
                flex-direction: row;
                margin: 0 !important;
                justify-content: center;
                align-items: center;
                margin-right: 20px !important;
                cursor: pointer;
               span{
                   &:first-child{
                       background-color: #ccc;
                       padding: 2px;
                       border-radius: 2px;
                       color: #fff;
                       font-size: 13px;
                   }
                   &:nth-child(2){
                       font-size: 13px;
                       margin-left: 5px;
                   }
               }
            }
        }
}
</style>